<template>
  <div :style="{ 'min-width': minWidth + 'px' }">{{ innerValue }}</div>
</template>
<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { isNullOrUndefOrEmpty } from "/@/utils/common";
import { TableColumnProps } from "ant-design-vue";

const props = defineProps<{
  title?: any;
  value?: any;
  record?: any;
  customRender?: (e: any) => any;
}>();

const minWidth = ref(40);
watch(
  () => props.title,
  (val) => {
    if (!val) {
      minWidth.value = 40;
      return;
    }
    const div = document.createElement("div");
    div.className = "whitespace-nowrap";
    div.style.position = "fixed";
    div.style.left = "-9999px";
    div.style.top = "-9999px";
    div.innerHTML = `<span>${val}</span>`;
    document.body.appendChild(div);
    const span = div.querySelector("span");
    if (span) {
      minWidth.value = span.offsetWidth;
    }
    document.body.removeChild(div);
  },
  {
    immediate: true,
  }
);

const innerValue = computed(() => {
  if (props.customRender) {
    return props.customRender({ text: props.value, record: props.record });
  }
  return isNullOrUndefOrEmpty(props.value) ? "--" : props.value;
});
</script>
